<template>
    <div>
        <!-- “:inline="true"”表示“一行显示表单”（即“行内表单”） -->
        <el-form ref="searchForm" :model="searchMap" :inline="true" class="demo-form-inline">
            <el-form-item prop="username">
                <el-input v-model="searchMap.username" class="username" placeholder="员工的用户名"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="searchMap.name" class="name" placeholder="           员工的姓名           "></el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input v-model="searchMap.phoneNumber" class="phoneNumber" placeholder="       员工的手机号       "></el-input>
            </el-form-item>
            <el-form-item prop="entryDate">
                <!-- “value-format”被用作指定绑定值（即“日期”）的格式↓ -->
                <el-date-picker value-format="yyyy-MM-dd" v-model="searchMap.entryDate" type="date" class="entryDate" placeholder="            入职日期            "></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="table" :data="list" :cell-style="rowStyle" height="380" border style="width: 100%">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column prop="username" align="center" label="员工的用户名"></el-table-column>
            <el-table-column prop="name" width="63" align="center" label="姓名"></el-table-column>
            <el-table-column prop="age" width="50" align="center" label="年龄"></el-table-column>
            <el-table-column prop="phoneNumber" align="center" label="手机号码"></el-table-column>
            <el-table-column prop="salary" width="54" align="center" label="薪酬"></el-table-column>
            <el-table-column prop="entryDate" align="center" label="入职日期"></el-table-column>
            <el-table-column prop="customer" width="63" align="center" label="客户"></el-table-column>
            <el-table-column prop="brandAndModelOfCellphone" align="center" label="该客户购买的手机"></el-table-column>
            <el-table-column align="center" label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button></template></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

        <!-- 这是选择客户用的对话框。其中“title”表示“对话框的标题”，当“:visible.sync”为“true”时会弹出对话框↓ -->
        <el-dialog title="选择客户" :visible.sync="dialogCustomerVisible" width="627px">
            <!-- Customer在此处是Staff的子组件，无需显示全部内容，只需选择性展示部分内容。达到这种效果的方法为“利用‘v-bind’单向数据绑定某个属性，向这个属性传入一个布尔值‘true’或‘false’”（因为子组件能接收到这个属性的值）。在此处 :isDialog="true"表示子组件Customer是弹出的对话框↓ -->
            <customer :isDialog="true" @be_Selected_Customer="beSelectedCustomer"></customer>
        </el-dialog>
        
        <!-- 这是新增员工用的对话框。其中“title”表示“对话框的标题”，当“:visible.sync”为“true”时会弹出对话框↓ -->
        <el-dialog title="编辑员工" :visible.sync="dialogFormVisible" width="376.5px">
            <el-form :model="beSubmittedData" ref="beSubmittedForm" :rules="rules" label-width="125px" label-position="right" style="width:356.5px;">
                <el-form-item label="员工的用户名" prop="username"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.username" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.name" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="beSubmittedData.age" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input v-model="beSubmittedData.phoneNumber" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪酬" prop="salary">
                    <el-input v-model="beSubmittedData.salary" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职日期" prop="entryDate">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="beSubmittedData.entryDate" type="date" style="width: 185px;" placeholder="        入职日期        "></el-date-picker>
                </el-form-item>
                <el-form-item label="该员工的客户" prop="customer">
                    <el-input v-model="beSubmittedData.customer" readonly @click.native="selectCustomerInEditStaffDialog" style="width: 185px;" autocomplete="off" placeholder="点击此处选择客户"></el-input>
                </el-form-item>
                <el-form-item label="该客户购买的手机" prop="brandAndModelOfCellphone">
                    <el-input v-model="beSubmittedData.brandAndModelOfCellphone" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" @click="addData('beSubmittedForm')">确 定</el-button> -->
                <el-button type="primary" @click="beSubmittedData.id === null ? addData('beSubmittedForm') : updateData('beSubmittedForm')">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import staffApi from '@/api/staff'

import Customer from '@/views/customer'

export default {
    
    components: {
        Customer
    },
    data() {
        return {
            list:[],
            total:0, // ←左边这项表示“总记录数”
            currentPage:1, // ←左边这项表示“当前页码”
            pageSize:10, // ←左边这项表示“每页显示10条数据”
            searchMap:{ // ←左边这项表示“条件查询绑定的条件值（字段值）”
                username:'',
                name:'',
                entryDate:'',
                phoneNumber:''
            },
            dialogCustomerVisible:false, // ←左边这项被用来控制对话框是否会被弹出（针对“选择客户”对话框）
            dialogFormVisible:false, // ←左边这项被用来控制对话框是否会被弹出（针对“编辑员工”对话框）
            beSubmittedData:{ // ←左边这项被用来表示“在对话框中被提交的数据”
                customerId:null,
                username:'',
                name:'',
                age:'',
                salary:'',
                entryDate:'',
                phoneNumber:'',
                customer:'',
                brandAndModelOfCellphone:''
            },
            rules:{ // ←左边这项被用来表示“表单的校验规则”
                username:[{required:true,message:'员工的用户名必填',trigger:'blur'}],
                phoneNumber:[{required:true,message:'员工的手机号必填',trigger:'blur'},{min:11,max:11,message:'手机号码是11位数',trigger:'blur'}],
                name:[{required:true,message:'员工姓名不能为空',trigger:'blur'}],
                age:[{required:true,message:'员工年龄不能为空',trigger:'blur'}],
                salary:[{required:true,message:'员工薪酬不能为空',trigger:'blur'}],
                entryDate:[{required:true,message:'入职日期不能为空',trigger:'blur'}],
            },
            isEditStaffDialog:false, // ←左边这项表示“是否为‘编辑员工’对话框”
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        resetForm(formName){
            this.$refs[formName].resetFields()
        },
        fetchData(){
            staffApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
                // 调用分页查询数据
                const be_responsed_staff_data = response.data.data
                console.log(be_responsed_staff_data.rows)
                console.log(be_responsed_staff_data.total)
                this.list = be_responsed_staff_data.rows
                console.log(this.list)
                this.total = be_responsed_staff_data.total
            })
        },
        // 这个函数（方法）在“每页显示条数被改变”时被触发，“value”代表“最新的每页显示的条数”↓
        handleSizeChange(value){
            console.log(value)
            this.pageSize = value
            this.fetchData()
        },
        // 这个函数（方法）在“当前页码被改变”时被触发，“value”代表“最新的页码”↓
        handleCurrentChange(value){
            console.log(value)
            this.currentPage = value
            this.fetchData()
        },
        // 被选择的客户
        beSelectedCustomer(currentRow){
            console.log('这里是父组件“Staff”，接收来自子组件“Customer”的消息',currentRow)
            if (this.isEditStaffDialog) {
                // 当前对话框是通过点击“编辑员工”对话框中的“该员工的客户”打开的被用于选择客户的对话框
                this.beSubmittedData.brandAndModelOfCellphone = currentRow.brandAndModelOfCellphone // 当前客户购买的手机的品牌和型号
                this.beSubmittedData.customer = currentRow.name // 当前客户的姓名
                this.beSubmittedData.customerId = currentRow.id // 该客户的ID
            }
            this.isEditStaffDialog = false //注意：在下面↓关闭对话框前要在此处为“this.isEditStaffDialog”重新赋值，把它的值设置为“false”（即“恢复初始值”）。因为若它的值一直为“true”，则上面万一需要添加“else”路径时，“else”路径会失效↑
            this.dialogCustomerVisible = false //关闭弹出的被用于选择客户的对话框
        },
        // 弹出新增窗口
        handleAdd(){
            console.log(this.beSubmittedData)
            this.dialogFormVisible = true
            this.$nextTick(() => { // ←左边这项是Vue中提供的内置的方法，因为回调函数无参数，所以要保留小括号。另外“this.$nextTick”是一个“异步事件”（指“当页面渲染结束后它的回调函数才会被执行”的事件），因为弹出窗口打开后需要花费时间加载（渲染）Dom（即那个表单），所以我们就应该等待它加载完成后再调用“resetFields”方法来重置表单和清除样式。
                this.$refs['beSubmittedForm'].resetFields()
            })
        },
        // 提交新增的数据
        addData(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                    // 提交表单
                    console.log('提交新增的数据')
                    staffApi.addstaff(this.beSubmittedData).then(response => {
                        const be_responsed_data = response.data
                        if(be_responsed_data.flag){
                            // 新增员工成功，然后刷新列表数据
                            this.fetchData()
                            this.dialogFormVisible = false // 关闭窗口
                        }
                        else{
                            // 新增员工失败，弹出提示信息
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{
                    return false
                }
            })
        },
        // 在“编辑员工”对话框中选择客户
        selectCustomerInEditStaffDialog(){
            this.isEditStaffDialog = true // ←左边这句表达式表示“当前对话框是通过点击‘编辑员工’对话框中的‘该员工的客户’打开的被用于选择客户的对话框”
            this.dialogCustomerVisible = true
        },
        // 打开编辑窗口
        handleEdit(id){
            console.log('编辑',id)
            this.handleAdd() // ←注意：此处不能直接使用“this.dialogFormVisible = true”来弹出对话框，因为需要调用“handleAdd”方法来清除这个对话框在这次被打开之前被打开时里面的表单上面可能残存的数据和样式（即校验结果）
            staffApi.getStaffInformationById(id).then(response => {
                const be_responsed_data = response.data
                if (be_responsed_data.flag) {
                    this.beSubmittedData = be_responsed_data.data
                    console.log(this.beSubmittedData)
                }
                else{ //提示获取数据失败
                    this.$message({
                        message:be_responsed_data.message,
                        type:'warning',
                        center:true
                    })
                }
            })
        },
        // 更新数据
        updateData(formName){
            console.log('updateData')
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 提交更新的数据（必须在页面里的表单通过数据校验的情况下发送请求进行更新）
                    staffApi.updateStaffInformation(this.beSubmittedData).then(response =>{
                        const be_responsed_data = response.data
                        if (be_responsed_data.flag) {
                            // 更新数据成功，然后刷新数据列表
                            this.fetchData()
                            this.dialogFormVisible = false
                        }
                        else{
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{ // 表单没有通过数据校验
                    return false
                }
            })
        },
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('你确定要删除这位员工吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消'
            }).then(() => {
                // 若点击“确定”则执行如下代码↓
                console.log('确认')
                staffApi.deleteStaffInformationById(id).then(response => {
                    const be_responsed_data = response.data
                    // 提示该员工被删除成功或者被删除失败
                    this.$message({
                        message:be_responsed_data.message,
                        center:true,
                        type:be_responsed_data.flag?'success':'error'
                    })
                    if (be_responsed_data.flag) {
                        // 该员工被删除成功，然后刷新列表数据
                            this.fetchData()
                    }
                })
            }).catch(() =>{
                // 点击“取消”。此处无需做任何逻辑处理（因为浏览器会自动关闭消息提示框）
                console.log('取消')
            })
        },
        rowStyle(){
            return "text-align:center";
        },
    },

    watch: {
        // 监听器（监听表格绑定的数据发生的变化。被用于当表格绑定的数据发生变化时重新布局表格，使每一列的表头与表体不发生错位）
        list:{
            handler(){
                this.$nextTick(() => {
 		            // 初始化表格（即每一列在接收到新数据时根据新的数据自动重新调整列宽（即“重新布局表格”），使表头与表体不发生错位）
                    this.$refs.table.doLayout();
                })
            },
            deep:true
        }
    }
}
</script>

<style lang="scss" scoped>
    .hideImgDiv{::v-deep.el-image__inner{display: none;}}
    .el-pagination{text-align: center;}
    .el-form{
        margin-top:15px;
        margin-bottom:15px;
        height:40px;
    }
    .username{width:148px;height:40px;}
    .name,.entryDate,.phoneNumber{
        width:217px;
        height:40px;
    }
    div{::v-deep.el-pagination{margin-top: 5px;margin-bottom: 5px;}}
    div{::v-deep.el-input__inner{text-align: center;}}
    div{::v-deep.el-textarea__inner{height: 38px;text-align: center;}}
    div{::v-deep.el-dialog__body{height: 350px;overflow-y: auto;overflow-x: hidden;}}
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left:14px;text-align: center;}}
</style>